<template>
  <div class="app-detail page-container">
    <div class="app-content">
      <!-- 应用信息卡片 -->
      <a-card class="app-info-card" :bordered="false">
        <div class="app-header">
          <div class="app-icon-wrapper">
            <a-icon :type="appInfo.icon" class="app-icon" />
          </div>
          <div class="app-title">
            <h2>{{ appInfo.name }}</h2>
            <div class="app-tags">
              <a-tag v-if="appInfo.flag" color="green">{{
                appInfo.flag
              }}</a-tag>
              <a-tag color="blue">{{ appInfo.category }}</a-tag>
            </div>
          </div>
          <div class="app-actions">
            <a-button type="primary" @click="startUsing">
              <a-icon type="play-circle" />
              开始使用
            </a-button>
            <a-button @click="toggleFavorite">
              <a-icon
                :type="appInfo.isFavorite ? 'star' : 'star-o'"
                :theme="appInfo.isFavorite ? 'filled' : 'outlined'"
              />
              {{ appInfo.isFavorite ? "已收藏" : "收藏" }}
            </a-button>
          </div>
        </div>

        <div class="app-description">
          <h3>应用描述</h3>
          <p>{{ appInfo.description }}</p>
        </div>

        <div class="app-features">
          <h3>主要功能</h3>
          <a-list :data-source="appInfo.features">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-icon
                type="check-circle"
                theme="filled"
                style="color: #52c41a"
              />
              <span>{{ item }}</span>
            </a-list-item>
          </a-list>
        </div>
      </a-card>

      <!-- 使用说明 -->
      <a-card class="usage-card" :bordered="false">
        <h3>使用说明</h3>
        <div class="usage-steps">
          <a-steps :current="0" size="small">
            <a-step
              title="选择应用"
              description="在应用商店中选择您需要的应用"
            />
            <a-step
              title="开始对话"
              description="点击开始使用按钮进入对话界面"
            />
            <a-step title="输入需求" description="向AI描述您的具体需求" />
            <a-step
              title="获取结果"
              description="AI将根据您的需求生成相应的内容"
            />
          </a-steps>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import { Button, Card, Icon, Tag, List, Steps } from "ant-design-vue";
import { getProjectInstance } from "@/api/projectInstance";
import { createConversation } from "@/api/cozeAi";
import { mapGetters } from 'vuex';

export default {
  name: "AppDetail",
  components: {
    "a-button": Button,
    "a-card": Card,
    "a-icon": Icon,
    "a-tag": Tag,
    "a-list": List,
    "a-list-item": List.Item,
    "a-steps": Steps,
    "a-step": Steps.Step,
  },
  computed: {
    ...mapGetters('user', ['id'])
  },
  data() {
    return {
      appInfo: {
        id: null,
        name: "",
        icon: "",
        description: "",
        category: "",
        tag: "",
        isFavorite: false,
        singlePrice: 0,
        features: [],
      },
    };
  },
  created() {
    // 从路由参数获取应用ID
    const {
      id,
      name,
      icon,
      description,
      category,
      flag,
      isFavorite,
      singlePrice,
    } = this.$route.query;
    if (id) {
      this.appInfo.name = name || ""; // 先设置名称，避免闪烁
      this.appInfo.icon = icon || "";
      this.appInfo.description = description || "";
      this.appInfo.category = category || "";
      this.appInfo.flag = flag || "";
      this.appInfo.isFavorite = isFavorite == "true";
      (this.appInfo.singlePrice = singlePrice || ""), this.loadAppInfo(id);
    } else {
      this.$message.error("缺少应用ID参数");
      this.$router.push("/store");
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    async loadAppInfo(appId) {
      try {
        const response = await getProjectInstance(appId);
        if (response.code === 200 && response.data) {
          if (app) {
            this.appInfo = {
              id: response.data.id,
              name: response.data.name || this.appInfo.name, // 如果API返回为空，保留路由传入的名称
              icon: response.data.icon || "appstore",
              description: response.data.description || "暂无描述",
              singlePrice: response.data.singlePrice || 0,
              features: response.data.features || [
                "批量处理文本内容",
                "智能改写文案",
                "保持原意不变",
                "提高工作效率",
              ],
            };
          } else {
            this.$message.error("未找到应用信息");
            this.$router.push("/store");
          }
        } else {
          this.$message.error(response.message || "获取应用详情失败");
        }
      } catch (error) {
        console.error("获取应用详情失败:", error);
        this.$message.error("获取应用详情失败");
      }
    },
    async startUsing() {
      // 调用接口，创建会话
      const response = await createConversation({
        userId: this.id,
        projectId: this.appInfo.id
      });
      if (response.code === 200 && response.data) {
        this.$router.push({
          path: "/chat",
          query: {
            id: this.appInfo.id,
            name: this.appInfo.name,
            icon: this.appInfo.icon,
            description: this.appInfo.description,
            singlePrice: this.appInfo.singlePrice,
            conversationId: response.data.data.id,
          },
        });
      } else {
        this.$message.error(response.message || "创建会话失败");
      }
    },
    toggleFavorite() {
      this.appInfo.isFavorite = !this.appInfo.isFavorite;
      // 这里应该调用API更新收藏状态
    },
  },
};
</script>

<style lang="less" scoped>
.app-detail {
  padding: 16px;
  background: #f5f7fa;
  min-height: 100vh;

  .page-header {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;

      .back-btn {
        padding: 0;
        height: auto;
        font-size: 14px;
        color: #666;

        .anticon {
          font-size: 14px;
          margin-right: 4px;
        }

        &:hover {
          color: #1890ff;
        }
      }

      .divider {
        width: 1px;
        height: 14px;
        background: #e8e8e8;
      }

      .page-title {
        font-size: 14px;
        font-weight: 500;
        color: #262626;
      }
    }
  }

  .app-content {
    .app-info-card {
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;

      .app-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;

        .app-icon-wrapper {
          .app-icon {
            font-size: 48px;
            color: #1890ff;
          }
        }

        .app-title {
          flex: 1;

          h2 {
            margin: 0 0 8px;
            font-size: 20px;
            color: #262626;
          }

          .app-tags {
            display: flex;
            gap: 8px;
          }
        }

        .app-actions {
          display: flex;
          gap: 12px;

          .ant-btn {
            height: 36px;
            padding: 0 16px;
            border-radius: 4px;
          }
        }
      }

      .app-description {
        margin-bottom: 24px;

        h3 {
          margin: 0 0 12px;
          font-size: 16px;
          color: #262626;
        }

        p {
          margin: 0;
          font-size: 14px;
          color: #595959;
          line-height: 1.6;
        }
      }

      .app-features {
        h3 {
          margin: 0 0 12px;
          font-size: 16px;
          color: #262626;
        }

        .ant-list-item {
          padding: 8px 0;
          border-bottom: none;

          .anticon {
            margin-right: 8px;
          }
        }
      }
    }

    .usage-card {
      border-radius: 8px;
      overflow: hidden;

      h3 {
        margin: 0 0 16px;
        font-size: 16px;
        color: #262626;
      }

      .usage-steps {
        padding: 0 16px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .app-detail {
    padding: 12px;

    .page-header {
      padding: 12px;
      margin-bottom: 8px;

      .header-left {
        .back-btn {
          font-size: 13px;

          .anticon {
            font-size: 13px;
          }
        }

        .divider {
          height: 12px;
        }

        .page-title {
          font-size: 13px;
        }
      }
    }

    .app-content {
      .app-info-card {
        .app-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;

          .app-title {
            width: 100%;

            h2 {
              font-size: 18px;
            }
          }

          .app-actions {
            width: 100%;
            justify-content: space-between;
          }
        }

        .app-description {
          h3 {
            font-size: 15px;
          }

          p {
            font-size: 13px;
          }
        }

        .app-features {
          h3 {
            font-size: 15px;
          }
        }
      }

      .usage-card {
        h3 {
          font-size: 15px;
        }
      }
    }
  }
}
</style>
